<template>
	<div id="count">
		<div class="countleft" @click=substrict>-</div>
		<div class="countcenter" v-text="count"></div>
		<div class="countright" @click="add">+</div>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				count:0
			}
		},
		methods:{
			add(){
				this.count++;
				this.sendmeassge();
			},
			substrict(){
				this.count--;
				if(this.count<=0){
					this.count=0;
				};
				this.sendmeassge();
			},
			sendmeassge(){
				this.$emit("datacount",this.count)
			}
		}
	}
</script>

<style scoped>
	#count div{
		float: left;
		width: 40px;
		height: 25px;
		line-height: 25px;
		border: 1px solid #000;
		text-align: center;
	}
	
</style>